<!--环境信息半年报 semiAnnualRpt-->
<template>
    <Layout class="menu-left">
        <Menu mode="horizontal" @on-select='lowerStep' :active-name="modaleshow">
        <MenuItem :name="1">环境信息报表1-6月</MenuItem>
        <MenuItem :name="0">环境信息报表1-12月</MenuItem>
    </Menu>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120" style="margin-top: 15px">
            <Row class="query-form"  >
                <Col span="8">
                    <FormItem label="公司名称：" prop="Company">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="年度：" prop="year" >
                        <DatePicker class="query-form-el" type="year" v-model="dataToQuery.year1" :clearable="false"
                                    @on-change="()=>{if(dataToQuery.year1 instanceof Date){dataToQuery.year = dataToQuery.year1.getFullYear().toString()}}"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8" v-if="!switchFlag">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset1" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
                <Col span="8" v-else>
                    <FormItem label='排放口分布情况：' prop='dischargeOutletDistribution'>
                        <Select class='query-form-el' placeholder="请选择主要污染物及特征污染物" type='text' v-model='dataToQuery.dischargeOutletDistribution'>
                            <Option v-for="item in dictMap['DOD-000001']" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label='主要污染物及特征污染物名称：' prop='contaminant'>
                        <Select class='query-form-el' placeholder="请选择主要污染物及特征污染物" type='text' v-model='dataToQuery.contaminant'>
                            <Option v-for="item in dictMap['CTMN-000001']" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8" offset="8">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset1" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
                    <Button size="large" class="ivu-btn-add" icon="md-download" @click="downloadDescriptionExcel">导出模板</Button>
                    <Button size="large" class="ivu-btn-add" icon="md-cloud-upload" @click="beachUpload">批量导入</Button>
                    <Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="exportFormSubmit">导出</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal  :title="modaleshow==1?'环境信息半年报':'环境信息年报'" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"  :width=800 :styles="{height:'600px'}"  class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'rpt-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?170:null" :label-position="mode === 'view'?'right':'top'">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='公司名称：' prop='companyId'>
                                    <div v-if="mode === 'view'">{{dataToView.companyName}}</div>
                                    <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true" :currentOrgId = "dataToView.companyId" :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}" ></cascader-dom>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                               <FormItem label='主要污染物及特征污染物名称：' prop='contaminantArr'>
                                 <div v-if="mode === 'view'">{{ dataToView.contaminantName }}</div>
                                 <Select v-else class='keep-inline'placeholder="请选择主要污染物及特征污染物" type='text' v-model='dataToView.contaminantArr' multiple>
                                   <Option v-for="item in dictMap['CTMN-000001']" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                                 </Select>
                               </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='排放方式：' prop='emissionsWay'>
                                    <div v-if="mode === 'view'">{{dataToView.emissionsWay}}</div>
                                    <Input v-else class='w' type='text' v-model='dataToView.emissionsWay'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='排放口数量：' prop='dischargeOutletAmount'>
                                    <div v-if="mode === 'view'">{{dataToView.dischargeOutletAmount}}</div>
                                    <InputNumber v-else class='w' placeholder="请填写排放口数量" :min='0' type='text' v-model='dataToView.dischargeOutletAmount'></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='排放口分布情况：' prop='dischargeOutletDistributionArr'>
                                    <div v-if="mode === 'view'">{{ dataToView.dischargeOutletDistributionName }}</div>
                                    <Select v-else class='' placeholder="请选择排放口分布情况" type='text' v-model='dataToView.dischargeOutletDistributionArr' multiple>
                                      <Option v-for="item in dictMap['DOD-000001']" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='排放浓度：' prop='emissionConcentration'>
                                    <div v-if="mode === 'view'">{{dataToView.emissionConcentration}}</div>
                                    <Input v-else class='w' placeholder="请填写排放浓度" type='text' v-model='dataToView.emissionConcentration'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='执行污染物排放标准：' prop='emissionStandard'>
                                    <div v-if="mode === 'view'">{{dataToView.emissionStandard}}</div>
                                    <Input v-else class='w' placeholder="请填写执行污染物排放标准" type='text' v-model='dataToView.emissionStandard'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='排放总量（吨）：' prop='totalEmission'>
                                    <div v-if="mode === 'view'">{{dataToView.totalEmission}}</div>
                                    <InputNumber v-else class='w' placeholder="请填写排放总量" :min='0' type='text' v-model='dataToView.totalEmission'></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='核定的排放总量（吨）：' prop='approvedTotalEmission'>
                                    <div v-if="mode === 'view'">{{dataToView.approvedTotalEmission}}</div>
                                    <InputNumber v-else class='w' placeholder="请填写核定的排放总量" :min='0' type='text' v-model='dataToView.approvedTotalEmission'></InputNumber>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='超标排放情况：' prop='excessiveEmission'>
                                    <div v-if="mode === 'view'">{{dataToView.excessiveEmission}}</div>
                                    <Input v-else class='w' placeholder="请填写超标排放情况" type='text' v-model='dataToView.excessiveEmission'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                              <FormItem label='填表人：' prop='registrant'>
                                <div v-if="mode === 'view'">{{dataToView.createUserName}}</div>
                                <Input v-else type='text' v-model='dataToView.createUserName' readonly></Input>
                              </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填表时间：' prop='registTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.createDate)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" class="w" v-model='dataToView.createDate' readonly></DatePicker>
                                </FormItem>
                            </Col>
							<Col span="11">
							<FormItem label='填报人电话：' prop='createMobile'>
								<div v-if="mode === 'view'">{{dataToView.createMobile}}</div>
								<Input v-if="mode === 'add'" type='text' v-model='dataToView.createMobile'></Input>
								<Input v-if="mode === 'edit'" type='text' v-model='dataToView.createMobile' :readonly="this.currentUser.userId === dataToView.createUserId ? false : 'readonly'"></Input>
							</FormItem>
							</Col>
						</Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='年度：' prop='year'>
                                    <div v-if="mode === 'view'">{{dataToView.year}}</div>
                                    <!--<Input v-else type="text"  class="w" v-model='dataToView.year' readonly></Input>-->
                                    <DatePicker v-else class="query-form-el" type="year" v-model="dataToView.yearDate" :clearable="false"
                                                @on-change="()=>{if(dataToView.yearDate instanceof Date){dataToView.year = dataToView.yearDate.getFullYear().toString()}}"></DatePicker>

                                </FormItem>
                            </Col>
                            <Col span="11">
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>

        <Modal :mask-closable="false" :transfer=false  v-model="model3" :width=700 :title="modaleshow==1?'环境信息半年报':'环境信息年报'" @on-cancel="cancelMap">
            <Form  ref="map" :show-message="false" :model="map" label-position="top">
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="23">
                        <FormItem  label="" prop="file">
                            <div>
                                <Upload ref="upload1"
                                        :before-upload="handleUpload "
                                        :format="['xlsx', 'xls']"
                                        accept=".xlsx, .xls"
                                        :max-size="10240"
                                        type="drag"
                                        :action="uploadUrl">
                                    <div style="padding: 10px">
                                        <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                                        <p>点击将文件拖拽到这里上传</p>
                                        <span style="font-size:8px;color: #797a64">仅支持上传单个excel </span>
                                    </div>
                                </Upload>
                            </div>
                            <div v-if="fileTrue">
                                <a>{{ map.file.name }}</a>
                                <Button type="text" icon="md-trash" @click="map.file = {},fileTrue = false" style="margin-left: 5px;margin-bottom: 3px"/>
                            </div>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="primary" class='ivu-btn-save' :disabled="uploadDissabled" @click="submitFile('map')">确定</Button>
                <Button type="primary" class='ivu-btn-cancel' @click="cancelMap">取消</Button>
            </div>
        </Modal>

        <Modal title="导入详情" v-model="logInfoModel" :transfer=false :mask-closable="false">
            <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="23">
                    <div v-html="logInfo"></div>
                </Col>
            </Row>
            <div slot="footer">
                <Button type="primary" class='ivu-btn-cancel' @click="logInfoModel=false,logInfo=null">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
  import {Api} from '@/api/index.js'
  import {formatDate} from '@/tools/index'
  var cascaderDom = () => import('@/components/cascader-dom.vue');
  import pageCommonFunction from '@/components/pageCommonFunction.js'
  import { sessionStorage } from '@/common/cacheUtils.js'
  export default {
    components:{
      cascaderDom
    },
    data() {
      return {
        ...this.createCommonDataField(),
        columns1: [
          { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
          // { key:'perfAssessNum',title: '绩效考核责任书编号',  align: 'center', width: 100},
          { key:'companyName',title: '公司名称', fixed: 'left', align: 'center', width: 200 },
            { key:'year',title: '年度', fixed: 'left', align: 'center', width: 80 },
          { key:'contaminantName',title: '主要污染物及特征污染物名称',  align: 'center', width: 200, },
          { key:'emissionsWay',title: '排放方式',  align: 'center', width: 180},
          { key:'dischargeOutletAmount',title: '排放口数量',  align: 'center', width: 100},
          { key:'dischargeOutletDistributionName',title: '排放口分布情况',  align: 'center', width: 180,},
          { key:'emissionConcentration',title: '排放浓度',  align: 'center', width: 100  },
          { key:'emissionStandard',title: '执行的污染物排放标准',  align: 'center', width: 200  },
          { key:'totalEmission',title: '排放总量',  align: 'center', width: 100  },
          { key:'approvedTotalEmission',title: '核定的排放总量',  align: 'center', width: 100  },
          { key:'excessiveEmission',title: '超标排放情况',  align: 'center', width: 200},
          this.getActionColumns(),
        ],
        ruleCustom : {
          companyId: [ { required: true, message: '请填写企业名称', trigger: 'change' } ],
          companyAddress: [ { required: true, message: '请填写所在地', trigger: 'change' } ],
		  createMobile: [{ pattern: /^((0\d{2,3}-\d{7,8})|(1[3675849]\d{9}))$/, required: true, message: '请填写填报人电话', trigger: 'change' }],
        },
        tableHeight:10,
        dictMap:{ },
        // api
        queryUrl:Api.querySemiAnnual,
        exportUrl:Api.exportSemiAnnual,
        deleteUrl:Api.deleteSemiAnnual,
        getUrl:Api.getSemiAnnual,
        updateUrl:Api.updateSemiAnnual,
        saveUrl:Api.saveSemiAnnual,
          uploadUrl:Api.uploadSemiAnnual,

          modaleshow: 1,

          fileTrue: false,
          map:{},
          model3:false,
          uploadDissabled: false,
          logInfoModel:false,
          logInfo:null
      }
    },
    async mounted() {
        this.dataToQuery.year1 = new Date()
        this.dataToQuery.year = new Date().getFullYear().toString()
        await this.$http.get(Api.queryDictBycode+"CTMN-000001,DOD-000001",{}).then((res)=>{
            this.dictMap = {
                'CTMN-000001':this.dictListToMap(res.data.data['CTMN-000001']),
                'DOD-000001':this.dictListToMap(res.data.data['DOD-000001'])
            }
        }).catch(e => {
                this.$Message.error("数据字典获取失败")
            });
        this.setTableHeight();
        this.query();
    },
    methods:{
      ...pageCommonFunction,
        submitFile(map){
            this.$refs[map].validate((valid) => {
                if (valid) {
                    this.uploadDissabled = true
                    let formData = new FormData();
                    formData.append("file", this.map.file);
                    formData.append("type", this.modaleshow);
                    formData.append("createUserId", this.currentUser.userId);
                    formData.append("createOrgId", this.currentUser.orgInfo.orgId);
                    this.$http.post(this.uploadUrl, formData).then((res) => {
                        this.uploadDissabled = false
                        if (res.data.status == "200") {
                            this.logInfoModel = true
                            this.logInfo = res.data.data
                            this.query()
                        } else {
                            this.$Message.error(res.data.msg);
                        }
                        this.map={}
                        this.fileTrue = false
                        this.model3=false
                    }).catch(e => {
                        console.log(e);
                        this.model3=false
                        this.map={}
                        this.uploadDissabled = false
                        this.$Message.error("导入失败！请检查导入文档的格式是否正确");
                    })
                } else {
                    this.$Message.error('请填报完整!');
                }
            })

        },
        handleUpload (file) {
            this.map.file = file;
            this.fileTrue = true
            return false;
        },
        cancelMap() {
            this.model3 = false
            this.fileTrue = false
            this.map ={}
        },
        beachUpload(){
            this.model3 = true
            this.fileTrue = false
            this.map ={}
        },
        downloadDescriptionExcel() {
            this.$http.get(Api.templateDownload+'8', {
                responseType: 'blob'      //告诉服务器我们需要的响应格式
            }).then((res) => {
                const aLink = document.createElement("a");
                let blob = new Blob([res.data], {
                    type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                });
                aLink.href = URL.createObjectURL(blob)
                aLink.download = "环境信息报表模板.xlsx" //标题
                aLink.click()
                document.body.appendChild(aLink)
            })
        },
      beforeEditDialogOpen(data){
        if(data.row.contaminant){
            data.row.contaminantArr = data.row.contaminant.split(',');
        }
        if(data.row.dischargeOutletDistribution){
            data.row.dischargeOutletDistributionArr = data.row.dischargeOutletDistribution.split(',');
        }
          if(data.row.year){
              data.row.yearDate = new Date(data.row.year + '-01-01');
          }
      },
      createEmptyDataToAdd(){
        return {
          emissionsWay:'有组织',
          excessiveEmission: '无',
          dischargeOutletAmount: null,
          totalEmission: null,
          approvedTotalEmission: null,
          type:this.modaleshow,
		  createMobile: sessionStorage('userId').getObject('userId').mobileNumber,
          year: new Date().getFullYear().toString(),
            yearDate: new Date()
        }
      },
      deleteData(params) {
        this.deleteDateAjax(params);
      },
        lowerStep(name) {
            this.modaleshow = name
            this.query();
        },
      query() {
          this.dataToQuery.type = this.modaleshow
          this.queryAjax();
      },
        reset1() {
            this.dataToQuery = {
                year1: new Date(),
                year : new Date().getFullYear().toString()
            };
            if (this.$refs.queryOrgCascader) {
                this.$refs.queryOrgCascader.resetCurrentOrg();
            }
            this.pagedata.currentPage=1
            this.query()
        },
      submit(name) {
          this.dataToQuery.type = this.modaleshow
        if(this.dataToView.contaminantArr){
            this.dataToView.contaminant = this.dataToView.contaminantArr.join(',');
        }
        if(this.dataToView.dischargeOutletDistributionArr){
            this.dataToView.dischargeOutletDistribution = this.dataToView.dischargeOutletDistributionArr.join(',');
        }
        this.submitAjax(name);
      },
      switchQuery(flag) {
          this.switchFlag = flag;
          if (!this.switchFlag) {
            this.tableHeight = this.tableHeight + 88;
          } else {
            this.tableHeight = this.tableHeight - 88;
          }
      }
    },
    watch:{
    },

  }
</script>

<style lang='css' scoped>
    .rpt-form{}
    /deep/ .rpt-form .query-form-el{width:100%;}

    /deep/ .ivu-select-multiple.keep-inline{}
    /deep/ .ivu-select-multiple.keep-inline .ivu-select-selection{}
    /deep/ .ivu-select-multiple.keep-inline .ivu-select-selection > div{ height: 100%;width: 100%;padding-top: 3px;word-break: keep-all;white-space: nowrap;overflow: hidden;text-overflow:ellipsis; }
    /deep/ .ivu-select-multiple.keep-inline .ivu-select-selection > div .ivu-tag-checked{display: inline; padding: 0;background: none; border: none;}
    /deep/ .ivu-select-multiple.keep-inline .ivu-select-selection > div .ivu-tag-checked > span{margin:0;display: inline;}
    /deep/ .ivu-select-multiple.keep-inline .ivu-select-selection > div .ivu-tag-checked .ivu-icon-ios-close{display: none;}
</style>
